<template>
    <div>
        <div id="echartsIdOne" ref="echartsIdOne" style="width:100%;height:600px;"></div>
    </div>  
</template>
<script>
export default {
    name: "Home",
    components: {
        
    },
    data() {
      return {
          
        }
    },
    methods: {
        initTopEcharts(){
            let myChart = this.$echarts.init(this.$refs.echartsIdOne);
            myChart.resize();
            var data = {
                "name": "flare",
                "children": [
                {
                "name": "analytics",
                "children": [
                    {
                    "name": "optimization",
                    }
                ]
                },
                {
                "name": "animate",
                "children": [
                    {"name": "Easing", "value": 17010},
                    {"name": "FunctionSequence", "value": 5842},
                    {"name": "ISchedulable", "value": 1041},
                    {"name": "Parallel", "value": 5176},
                    {"name": "Pause", "value": 449},
                ]
                },
                {
                    "name": "scale",
                    "children": [
                        {"name": "IScaleMap", "value": 2105},
                        {"name": "LinearScale", "value": 1316},
                        {"name": "LogScale", "value": 3151},
                        {"name": "OrdinalScale", "value": 3770},
                        {"name": "QuantileScale", "value": 2435}
                    ]
                },
                {
                "name": "util",
                "children": [{"name": "Property", "value": 5559},
                    {"name": "Shapes", "value": 19118},
                    {"name": "Sort", "value": 6887},
                    {"name": "Stats", "value": 6557},
                    {"name": "Strings", "value": 22026}]
                }]
            }
            myChart.setOption({
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series: [
                    {
                        type: 'tree',
                        symbol: 'roundRect',
                        symbolSize:'40',
                        data: [data],
                        verticalAlign:'middle',
                        top: '1%',
                        left: '7%',
                        bottom: '1%',
                        label: {
                            right: '0',
                            verticalAlign: 'middle',
                            align: 'center',
                            fontSize: 9,
                        },
                        itemStyle:{
                            color:'white',
                            borderColor:'black',
                        },
                        leaves: {
                            itemStyle:{
                                color:'white',
                                borderColor:'black',
                            },
                            label: {
                                right: '0',
                                verticalAlign: 'middle',
                                align: 'center',
                                fontSize: 9
                            }
                        },

                        emphasis: {
                            focus: 'descendant'
                        },

                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750
                    }
                ]
            });

        },
    },
    mounted(){
       this.initTopEcharts()
    }
}
</script>
<style scoped lang>
    .template{
        width: 100%;
    }
</style>


